<!-- 我的 - 顾问 - 顾问中心 -->
<template>
  <view>
    <z-navbar title="顾问团" :border-bottom="false" bg-color="#F4AF22"></z-navbar>
    <view class="px-4 pt-5 bg-#f6f6f6 min-h-screen">
      <u-tabs bg-color="none" :list="state.tabList" bar-height="6" bar-width="36" active-color="#333"
        inactive-color="#999" font-size="32" :bar-style="barStyle" v-model="state.currentIndex"
        @change="onTabChange"></u-tabs>
      <view class="grid grid-cols-3 gap-4 mt-3">
        <view v-for="(item, index) in state.list" :key="index" class="flex flex-col items-center bg-white rounded-md py-3 px-1">
          <u-image width="116" height="116" shape="circle" :src="item.user?.avatar" @click="navigate(`/package_user/pages/mine/index?user_id=${item.user_id}`)" />
          <view class="mt-2 mb-1 c-#333 text-28 w-full text-single text-center">{{ item.name }}</view>
          <view class="c-#999 text-24">服务{{ item.service_number }}家</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { navigate } from "@/common/util/uni";
import { getCounselorLists } from '@/common/http/module/center'
import { getExpertiseList } from '@/common/http/module/common'
import { onLoad } from '@dcloudio/uni-app';

const state = reactive({
  currentIndex: 0,
  list: [],
  tabList: []
});

const barStyle = {
  backgroundColor: '#F4AF22'
}

// tab切换
function onTabChange (i) {
  state.currentIndex = i
  loadList()
}

async function loadData () {
  const { data } = await getExpertiseList()
  state.tabList = data.map(v => {
    return {
      id: v.id,
      name: v.expertise_name
    }
  })
  loadList()
}

async function loadList () {
  const { data: adviser } = await getCounselorLists(state.tabList[state.currentIndex]?.id)
  state.list = adviser.data
}

onLoad(() => {
  loadData()
})
</script>

<style lang="scss" scoped></style>
